<template>
    <div class="topbar">
        <div class="container">
            <div class="topbar-nav">
                <fragment v-for="(item,index) in items" :key="index">
                    <router-link to="">{{item.title}}</router-link>
                    <span class="sep"> | </span>
                </fragment>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TopBar",
        data(){
           return{
               items:[{title:'小米商城'},{title:'MIUI'},{title:'IoT'},{title:'云服务'},{title:'金融'},{title:'有品'},{title:'小爱开放平台'}
                   ,{title:'企业团购'},{title:'资质证照'},{title:'协议规划'},{title:'下载app'},{title:'Select Location'}]
           }
        }
    }
</script>

<style scoped>
    .topbar {
        position: relative;
        z-index: 30;
        height: 40px;
        font-size: 12px;
        color: #b0b0b0;
        background: #333;
    }

    .topbar .topbar-nav {
        float: left;
        height: 40px;
        line-height: 40px;
    }

    .topbar a {
        color: #b0b0b0;
        line-height: 40px;
        display: inline-block;
    }

    .topbar a:hover {
        color: #fff
    }

    .topbar .sep {
        margin: 0 .3em;
        color: #424242;
        font-family: sans-serif;
    }
</style>